<template>
  <!-- 本组件适用于柱、线是任意组合使用 -->
  <div id="home" ref="allEcharts" v-dyx-resize="chartChange"></div>
</template>
<script>
// @ is an alias to /src
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {
        return {
          xLabel: [],
          series: [],
          yData: [],
        };
      },
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    initChart() {
      const that = this;
      if (!this.myChart) {
        this.myChart = this.$echarts.init(this.$refs.allEcharts);
      }
      let series = [];
      let yData = [];
      this.chartData.series.forEach((it, i) => {
        series.push({
          type: it.type,
          name: it.tooltipLabel,
          splitLine: {
            show: i === 0,
            lineStyle: {
              color: "rgba(52, 78, 130, 0.2)",
              width: 1,
              type: "dashed",
            },
          },
          yAxisIndex: i,
          data: it.data,
          color: it.color,
          ...it.otherOption,
        });
      });
      this.chartData.yData.forEach((it, i) => {
        yData.push({
          type: "value",
          name: it.axisLabel ?? "",
          splitLine: {
            show: i === 0,
            lineStyle: {
              color: "rgba(52,78,130,0.2)",
              width: 1,
              type: "dashed",
            },
          },
          show: true,
          axisLabel: {
            show: true,
            color: "#000",
          },
          axisLine: {
            show: it.showAxis ?? true,
          },
        });
      });
      let option = {
        legend: {
          //图例
          show: true,
          top: "0%",
          itemGap: 5, //图例之间距离
          itemWidth: 10, //图例大小
          itemHeight: 10,
          textStyle: {
            //图例字体样式
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: (it) => {
            let y = "";
            for (let i = 0; i < it.length; i++) {
              y += `<br />${it[i].seriesName}：<span style="color: ${it[i].color};">${it[i].value}</span>`;
            }
            return `${it[0].axisValue}${y}`;
          },
        },
        grid: {
          top: "20%",
          left: "5%",
          right: "5%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.chartData.xLabel,
            axisPointer: {
              type: "shadow",
            },
            axisTick: false,
            axisLine: {
              lineStyle: {
                color: "#000",
              },
            },
            axisLabel: {
              color: "#000",
            },
          },
        ],
        yAxis: yData,
        series: series,
      };
      this.myChart.setOption(option, true);
    },
    chartChange() {
      this.myChart && this.myChart.resize();
    },
  },
  mounted() {
    this.chartData &&
      this.chartData.yData &&
      this.chartData.series &&
      this.myChart &&
      this.initChart();
  },
  watch: {
    chartData: {
      handler(n) {
        if (n && n.yData && n.series) {
          if (n.yData.length !== n.series.length) {
            throw new Error("y轴数组长度必须与series长度相等");
          }
          this.initChart();
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
#home {
  width: 100%;
  height: 100%;
}
</style>
